<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用component元素结合使用“:is”属性实现组件切换</title> 
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <a href="#" @click.prevent="comName='login'">登录</a>
  <a href="#" @click.prevent="comName='register'">注册</a>
  <!-- Vue提供了component，来展示对应名称的组件 -->
  <!-- component 是一个占位符,:is属性，可以用来指定要展示的组件的名称 -->
  <component v-bind:is="comName"></component>
</div>
<script>
  Vue.component('login', {
      template: '<div>登录组件</div>'
  })
  Vue.component('register', {
      template: '<div>注册组件</div>'
  })
  var vm = new Vue({
      el: '#app',
      data: { 
		  comName: 'login' //当前component中的:is绑定的组件
	  }
  })
</script>
</body>
</html>